 <template>
 	<view class="container">
 		<view class="upload-section">
 			<text>请上传银行卡正面照：</text>
 			<button @click="uploadFront">选择文件</button>
 			<image v-if="frontUrl" class="preview-img" :src="frontUrl" mode="widthFix"></image>
 		</view>
 		<view class="upload-section">
 			<text>请上传银行卡反面照：</text>
 			<button @click="uploadBack1">选择文件</button>
 			<image v-if="backUrl" class="preview-img" :src="backUrl" mode="widthFix"></image>
 		</view>
 		<button @click="submitDCard">提交银行卡</button>
 	</view>
 </template>

 <script>
 	export default {
 		data() {
 			return {
 				frontUrl: '', // 身份证正面照片URL  
 				backUrl: '', // 身份证反面照片URL  ,
 				data1: [{
 					name: "中国建设银行",
 					type: "储蓄卡",
 					num: '**** 6839 **** 9655',
 				}]
 			};
 		},
 		methods: {
 			// 选择并上传身份证正面照片  
 			uploadFront() {
 				uni.chooseImage({
 					count: 1, // 默认9，设置为1表示只上传一张  
 					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
 					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
 					success: (res) => {
 						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
 						this.frontUrl = res.tempFilePaths[0];
 					}
 				});
 			},
 			// 选择并上传身份证反面照片  
 			uploadBack1() {
 				uni.chooseImage({
 					count: 1,
 					sizeType: ['original', 'compressed'],
 					sourceType: ['album', 'camera'],
 					success: (res) => {
 						this.backUrl = res.tempFilePaths[0];
 					}
 				});
 			},
 			// 提交身份证信息（此处为示例，实际可能发送到服务器）  
 			submitDCard() {
 				uni.setStorageSync('lists', JSON.stringify(this.data1))
 				uni.reLaunch({
 					url: "/pages/Bind/Bind"
 				})

 			}
 		}
 	};
 </script>

 <style>
 	.container {
 		padding: 20px;
 	}

 	.upload-section {
 		margin-bottom: 20px;
 	}

 	.preview-img {
 		width: 100%;
 		height: 200px;
 		/* 可调整 */
 	}
 </style>